<template>
  <div class="user-wrap">
    <div class="navbar">
      <span class="navbar-title">个人中心</span>
      <router-link to="/userInfo">
        <span class="navbar-link">
          <van-icon name="edit" size="30" color="#fff"
        /></span>
      </router-link>

      <div class="user-info">
        <div class="user-info-box">
          <div class="icon-box">
            <img :src="user.userPortrait" />
          </div>
          <div class="name-box">
            <p class="name-box-name">{{ user.userRealname }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="float-nav">
      <div class="float-nav-box">
        <div v-for="(item, index) in data.floatNav" :key="item">
          <router-link :to="item.derectTo">
            <div class="float-nav-item">
              <van-icon
                class="float-nav-item-icon"
                :name="item.vIcon"
                size="29"
                :color="data.color[index]"
              />
              <font class="float-nav-item-text" :color="data.color[index]">{{
                item.text
              }}</font>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="user-list-box">
      <div class="user-list-item" v-for="item in data.list" :key="item">
        <div @click="handleListClick(item.derectTo)">
          <div class="user-list-icon">
            <van-icon
              :name="item.icon"
              color="#87d4eb"
              style="vertical-align: -10%"
            />
          </div>
          <p class="user-list-text">{{ item.text }}</p>
          <van-icon class="right-arrow" name="arrow" color="#87d4eb" />
        </div>
      </div>
    </div>
    <div class="logout">
      <van-button round color="#87d4eb" class="logout-btn" @click="handleLogOut"
        >退出登录</van-button
      >
    </div>
    <!-- 课程激活遮障层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <span>请输入课程激活码</span>
          <van-field
            v-model="data.activeValue"
            class="block-input"
            placeholder="在此输入课程激活码"
          />
          <div class="block-btn" @click="show = false">取消</div>
          <div class="block-btn" @click="handleSubmit">激活课程</div>
        </div>
      </div>
    </van-overlay>
    <van-tabbar route active-color="#87d4eb">
      <van-tabbar-item replace to="/" icon="search"></van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="home-o"></van-tabbar-item>
      <van-tabbar-item replace to="/user" icon="user-o"></van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { reactive, getCurrentInstance, ref } from "vue";
import { Toast } from "vant";
import { localRemove, localGet } from "../../utils/auth";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      floatNav: [
        {
          vIcon: "comment",
          text: "消息公告",
          derectTo: "/user/Notice",
        },
        {
          vIcon: "sign",
          text: "已修课程",
          derectTo: "/user/Learnt",
        },
        {
          vIcon: "like",
          text: "我的收藏",
          derectTo: "/user/Collection",
        },
      ],
      list: [
        {
          text: "课程激活",
          icon: "friends",
          derectTo: "/user",
        },
        {
          text: "我的评价",
          icon: "sign",
          derectTo: "/user/CourseComment",
        },
        {
          text: "设置",
          icon: "setting",
          derectTo: "/user/Settings",
        },
      ],

      color: ["#ff6666", "#16d6cb", "#00a8ff"],
      activeValue: "",
    });
    const show = ref(false);
    function onClickLeft() {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push("/user");
    }
    function handleLogOut() {
      localRemove("STEM_TOKEN");
      sessionStorage.clear()
      localStorage.clear()
      proxy.$router.push("/login");
      // 等后端修好了再加上
      // proxy.$axios.user.logout().then(res => {
      //   if (res.status === 200) {
      //     Toast('用户已下线')
      //   } else {
      //     console.log(res)
      //   }
      // })
    }
    function handleListClick(url) {
      if (url === "/user") {
        this.show = "true";
      } else {
        proxy.$router.push(url);
      }
    }
    return {
      data,
      onClickLeft,
      handleLogOut,
      handleListClick,
      show,
    };
  },
  created() {
    this.getUser();
  },
  data() {
    return {
      user: {
        userId: 0,
        userPortrait: "",
        userNickname: "",
        userRealname: "",
        userUid: "",
        userTel: "",
        userGroup: 1,
        userSex: 1,
        userPassword: "",
      },
    };
  },
  methods: {
    getUser() {
      this.user = localGet("STEM_USER_INFO");
    },
    handleSubmit() {
      this.$axios.course.activeCourse(this.data.activeValue).then((res) => {
        if (res.status === 200) {
          Toast.success("课程激活成功");
        } else {
          const msg = res.data.message;
          Toast.fail(msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-wrap {
  min-height: 100vh;
  color: $theme-color4;
}
.navbar {
  padding: 20px $margin-horizon 0;
  background: url(@/assets/images/cloud.png) no-repeat;
  background-size: 100% 100%;
  background-color: $theme-color1;
  z-index: 999;
  &-title {
    font-size: $fontsize-1;
    color: $theme-color3;
  }
  &-link {
    float: right;
  }
}
.user-info {
  margin-top: $margin-verticle;
  display: flex;
  flex-direction: row;
  padding-top: 10px;
  padding-bottom: 50px;
  &-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .icon-box {
      margin-left: 28px;
      margin-right: 15px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name-box {
      &-name {
        font-size: $fontsize-3;
        color: $theme-color3;
        text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 1px;
      }
    }
  }
}
.float-nav {
  margin-top: -30px;
  margin-bottom: 20px;
  &-box {
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 70%;
    background-color: $theme-color3;
    border-radius: $border-radius;
    display: flex;
    justify-content: space-around;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);
  }
  &-item {
    display: flex;
    flex-direction: column;
    &-icon {
      text-align: center;
    }
    &-text {
      line-height: 24px;
      font-size: $fontsize-5;
    }
  }
}
.user-list {
  &-box {
    margin: 0 $margin-horizon;
    padding-bottom: 10px;
    background-color: $theme-color3;
    border-radius: $border-radius;
    overflow: hidden;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
  }
  &-item {
    padding-left: $margin-horizon;
    height: 50px;
    .right-arrow {
      float: right;
      line-height: 50px;
      margin-right: $margin-horizon;
    }
  }
  &-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  &-text {
    font-size: $fontsize-4;
    display: inline-block;
  }
}
.logout {
  margin-top: 18px;
  text-align: center;
  &-btn {
    width: 70%;
    height: 30px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 60%;
  height: 20%;
  padding: 10%;
  background-color: #fff;
  box-shadow: 0px 17px 17px 0px rgba(0, 0, 0, 0.5);
  span {
    font-size: $fontsize-3;
  }
  &-input {
    margin-top: 15px;
    width: 100%;
    border: 2px solid #e5e5e5;
    border-radius: 5px;
  }
  &-btn {
    float: right;
    margin: 15px 0 0 15px;
    color: $theme-color1;
    font-size: $fontsize-5;
  }
}
</style>
